<!DOCTYPE html>
<html>
<head>
    <#import "../common/common.macro.ftl" as netCommon>
    <title>${title!"艺术上海"}</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="${keywords?if_exists}" />
    <meta name="description" content="${description?if_exists}" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="/static/css/bootstrap.mini.css" rel="stylesheet" />
    <link href="/static/css/style.css" rel="stylesheet" />
    <link href="/static/css/common/index.css" rel="stylesheet" />
    <link href="/static/css/header/index.css" rel="stylesheet" />
    <link href="/static/css/footer/index.css" rel="stylesheet" />
    <link href="/static/css/font/font-awesome.min.css" rel="stylesheet" />
    <link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <style>
        .itemside{
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
        }
        .info{
            margin-left: 10px;
        }
        dt{
            margin: 6px 0px;
        }
        dd{
            margin: 6px 0px;
        }
        #orderTotalPrice{
            font-size: 24px;
        }
        .alert-success{
            margin-top: 40px;
        }
        .price-wrap{
            font-weight: bold;
        }
    </style>
</head>
<body>
<!-- header -->
<@netCommon.commonHeader "works" menu i18n/>

<!-- ========================= SECTION PAGETOP ========================= -->
<section class="section-pagetop bg" style="margin-top: 110px">
    <div class="container">
        <h2 class="title-page">结算</h2>
    </div> <!-- container //  -->
</section>
<!-- ========================= SECTION INTRO END// ========================= -->

<!-- ========================= SECTION CONTENT ========================= -->
<section class="section-content padding-y" style="padding-top: 20px">
    <div class="container">

        <div class="row" style="margin: 0px">
            <main class="col-md-8">
                <div class="card">

                    <table class="table table-borderless table-shopping-cart">
                        <thead class="text-muted">
                        <tr class="text-uppercase">
                            <th scope="col" width="420">产品</th>
                            <th scope="col" width="180">数量</th>
                            <th scope="col" width="">价格</th>

                        </tr>
                        </thead>
                        <tbody id="cart-list-box">

                        </tbody>
                    </table>

                    <div class="card-body border-top">
                        <div class="row" style="margin-top: 24px; margin: 0px; padding: 10px">

                            <article class="card-body">
                                <dl class="row">
                                    <dt class="col-sm-10">商品数量:</dt>
                                    <dd class="col-sm-2 text-right"><strong  id="orderNum"></strong></dd>
                                    <dt class="col-sm-10">商品金额:</dt>
                                    <dd class="col-sm-2 text-right"><strong  id="orderPrice"></strong></dd>
                                    <dt class="col-sm-10">运费: </dt>
                                    <dd class="col-sm-2 text-right"><strong id="freightFee"></strong></dd>
                                    <dt class="col-sm-10">裱框: </dt>
                                    <dd class="col-sm-2 text-right"><strong id="framePrice"></strong></dd>

                                    <dt class="col-sm-10">支付金额:</dt>
                                    <dd class="col-sm-2 text-right text-danger"><strong
                                                class="h5 text-dark" id="orderTotalPrice"></strong></dd>
                                </dl>
                            </article>

                        </div>
                        <article class="card-body  border-top">
                            <a href="#" class="btn btn-primary btn-order float-md-right" style="width: 140px;"> 支付</a>
                        </article>

                    </div>
                </div> <!-- card.// -->

                <div class="alert alert-success mt-3">
                    <p class="icontext"><i class="icon text-success fa fa-truck"></i> 物流到达时间预计1至2周
                    </p>
                </div>

            </main> <!-- col.// -->
            <aside class="col-md-4">

                <div class="card">
                    <div class="card-body" >

                        <div id="address-list">

                        </div>
                    </div>

                    <#--                    <div class="card-body">-->
                    <#--                        <h5 style="margin-bottom:14px">收货地址</h5>-->
                    <#--                        <p>李明 18621566601</p>-->
                    <#--                        <p>上海浦东新区世纪大道24号楼201室</p>-->

                    <#--                        <a href="#" class="btn btn-primary " style="margin-top: 20px;"> 更改</a>-->
                    <#--                    </div>-->
                    <!-- card-body.// -->
                </div> <!-- card .// -->
            </aside> <!-- col.// -->
        </div>

    </div> <!-- container .//  -->
</section>

<!-- footer -->

<!-- script -->
<@netCommon.commonScript />
<script src="/static/js/handlebars.js"></script>
<script id="tp_track_list" type="text/x-handlebars-template">

    {{#each this}}

    {{#each items}}
    <tr>
        <td style="padding: 20px 10px">
            <figure class="itemside">
                <div class="aside">
                    <img src="{{productImage}}"
                                        style="width: 100px;height: 100px; border-radius: 4px; object-fit: cover;"></div>
                <figcaption class="info"><a href="#" class="title text-dark"><strong>{{productName}}</strong></a>
                    <p class="text-muted">
                        {{#if artists}}
                        {{#each artists}}
                        {{name}}
                        {{/each}}
                        {{/if}}
                    </p>
                    <p>
                        {{#if bizValue6}}
                        {{bizValue6}}
                        {{/if}}
                        {{#if bizValue6}}
                        x {{bizValue6}}cm
                        {{/if}}

                    </p>
                </figcaption>
            </figure>
        </td>
        <td style="padding: 20px 10px">1</td>
        <td style="padding: 20px 10px">
            <div class="price-wrap">¥{{price}}</div>
            <p> {{#if freightFee}}
                运费: {{freightFee}}元 <br/>
                {{/if}}
                {{#if framePrice}}
                裱框费: {{framePrice}}元
                {{/if}}
            </p>
        </td>
    </tr>

    {{/each}}
    {{/each}}
</script>

<script>
    var productData ;
    var productNo;
    var type;
    var buyList = [];
    var totalPrice = 0;
    var freightFee = 0;
    var framePrice = 0;
    var picPrice =null ;
    var picNo=null;
    var addrId = null;
    var skuNo = null;
    var orderlist = [];
    $(function () {
        $('.btn-order').click(function () {
            simpleOrder()
        })
        getProductDetail();
        var currAddr = localStorage.getItem('currAddr')
        //如果没有当前选择的 使用默认地址
        debugger;
        if(!currAddr){
            queryAddressList();
        }else{
            currAddr = JSON.parse(currAddr);
            addrId = currAddr.id
            var html = '  <p>'+currAddr.linkManName +' '+currAddr.linkManMobile+'</p> <p>'+currAddr.addr+'</p>'
            $('#address-list').append(html)
            setChangeAddr();
        }

        var cartItem = localStorage.getItem('cartItems')
        var cartList;
        if(cartItem){
            try{
                cartList = JSON.parse(cartItem)
            }catch (e) {

            }
        }
        var list = []

        for(var i=0; i<cartList.length; i++ ){

            list.push(cartList[i].companyNo);

        }
         console.log(JSON.stringify(list));
         list = unique1(list);

         for(var i=0; i<list.length; i++){
             var obj = {
                 companyNo:list[i],
                 items:[]
             }
             orderlist.push(obj);
         }


        for(var i=0; i<cartList.length;i++){

            for(var j=0; j<orderlist.length;j++){
                if(cartList[i].companyNo == orderlist[j].companyNo){
                    orderlist[j].items.push(cartList[i])
                }
            }
        }
        console.log(orderlist)
        buildBuyList()
    })

    function unique1(arr){
        var hash=[];
        for (var i = 0; i < arr.length; i++) {
            if(hash.indexOf(arr[i])==-1){
                hash.push(arr[i]);
            }
        }
        return hash;
    }

    function simpleOrder() {
        if(addrId===null){
            alert('请先设置收件地址');
            return;
        }
        var postlist =[];
        for(var i=0; i<orderlist.length; i++){
           var obj = {
               addrId: addrId,
               items:[]
           }
            postlist[i] = obj
           debugger;
           var arr = []
           if(orderlist[i].items){
               var items = orderlist[i].items
               for(var j=0; j<items.length; j++){
                   if(items[j].freightFee && items[j].freightFee!=''){
                        if(obj.freight){
                            obj.freight = obj.freight + items[j].freightFee
                        }else{
                            obj.freight =  items[j].freightFee
                        }

                   }
                   var data ;
                   if(items[j].frameNo && items[j].frameNo!=''){
                       data = {
                           frameNo: items[j].frameNo,
                           cartId: items[j].id,
                           productNo: items[j].productNo,
                           skuNo: items[j].skuNo,
                           quantity: items[j].quantity
                       }
                   }else {
                       data = {
                           cartId: items[j].id,
                           productNo: items[j].productNo,
                           skuNo: items[j].skuNo,
                           quantity: items[j].quantity
                       }
                   }
                   arr.push(data);
               }
           }
           postlist[i].items = arr;

        }

        console.log(JSON.stringify(postlist));

        var param = {
            orders: postlist
        }
        $.ajax({
            type: "POST",
            url: baseUrl+"api/shop-center/app/mall/order/saveByCustMultiple",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            headers: {
                'lbv': '1.0',
                'tenant' : 'PTC',
                'token':  getToken(),
            },

            data: JSON.stringify(param),
            success: function (res) {
                if(res && res.code && res.code=='0' && res.data){
                    debugger;
                    var sn =[];
                    if(res.data.list){
                        for(var i=0; i<res.data.list.length; i++){
                            sn.push(res.data.list[i].sn)
                        }
                    }
                    var str = sn.join('$')
                    window.location.href = '/order/pay?sn='+str+'&type=mti&money='+orderTotalPrice;
                }
                else{
                        alert(res.msg);
                        if(res.code=='-3'){
                            relogin(window.location.href);
                        }
                        
                    }
            },
            error: function (res) {

            }
        });
    }

    function buildBuyList() {

        for(var j=0;j<orderlist.length;j++){
            if( orderlist[j].items){
                buyList =orderlist[j].items;

                for(var i=0;i<buyList.length;i++){

                    totalPrice = totalPrice + buyList[i].price;
                    debugger;
                    if(buyList[i].freightFee && buyList[i].freightFee !=''){
                        freightFee = freightFee + buyList[i].freightFee;
                    }

                    if(buyList[i].framePrice && buyList[i].framePrice !=''){
                        framePrice = framePrice + buyList[i].framePrice
                    }

                    if(buyList[i].skuItems.length>0){
                        skuNo = buyList[i].skuItems[0].skuNo
                    }
                }
            }
        }

        var tpl = $("#tp_track_list").html();
        var template = Handlebars.compile(tpl);
        var html = template(orderlist);
        $('#cart-list-box').html(html);

        $("#orderNum").html(buyList.length + '件');
        $("#orderPrice").html('¥'+totalPrice);
        $("#freightFee").html('¥'+freightFee);
        $("#framePrice").html('¥'+framePrice);
        orderTotalPrice = totalPrice + freightFee + framePrice;
        if(picPrice!==null){
            orderTotalPrice = Number(picPrice) + orderTotalPrice
        }
        $("#orderTotalPrice").html('¥'+orderTotalPrice)
    }

    function setChangeAddr() {
        var str= '<a href="#" class="btn btn-primary " id="btn-change-addr" style="margin-top: 20px;"> 更改</a>'
        $('#address-list').append(str)
        $('#btn-change-addr').click(function () {
            window.location.href='/user/address'
        })
    }

    function queryAddressList() {


        $.ajax({
            type: "GET",
            url: baseUrl+"api/user-center/app/cust/addr/list",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            headers: {
                'lbv': '1.0',
                'tenant' : 'PTC',
                'token':  getToken(),
            },
            success: function (res) {
                if(res && res.code && res.code=='0' ){
                    if(res.data){
                        //有地址
                        var list = res.data;

                        $('#address-list').append(  '<h5 style="margin-bottom:14px">收货地址</h5>')
                        for(var i=0; i<list.length; i++){
                            if(list[i].isDef==='1'){
                                addrId = list[i].id
                                var html = '  <p>'+list[i].linkManName +' '+list[i].linkManMobile+'</p> <p>'+list[i].addr+'</p>'
                                $('#address-list').append(html)
                            }
                        }
                        setChangeAddr();
                    }else{
                        //没有地址
                        $('#address-list').append(  '<h5 style="margin-bottom:14px">收货地址</h5>')
                        $('#address-list').html('<a href="#" class="btn btn-primary " id="btn-add-address" style="margin-top: 20px;"> 新建地址</a>')
                        $('#btn-add-address').click(function () {
                            alert('新增地址');
                        })
                    }
                }else if(res.code =='-3'){
                    var url = window.location.href
                    debugger;
                    relogin(url);
                }
            },
            error: function (res) {

            }
        });
    }

    function getProductDetail() {
        $.ajax({
            type: "GET",
            url: baseUrl+"api/shop-center/app/prd/product/get?productNo="+productNo,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (res) {
                if(res && res.code && res.code=='0' && res.data){
                    productData = res.data;
                    buyList = [productData]
                    buildBuyList()
                }
            },
            error: function (res) {

            }
        });
    }

</script>



</body>
</html>
